<!-- 设备台账 朝合公区电表 | 商户电表 routeQuery.type == 1 是公区 2 是商户 -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<template v-if="routeQuery.type == 1">
					<el-select v-model="searchObj.deviceMatch" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="是否一致" @change="queryList">
						<el-option label="一致" value="1" />
						<el-option label="未找到" value="0" />
					</el-select>
					<el-input v-model="searchObj.deviceCode" class="zs-select-md zs-space-right-sm" placeholder="设备唯一编号" clearable @blur="queryList" />
					<el-input v-model="searchObj.dispatchNumber" class="zs-select-md zs-space-right-sm" placeholder="调度号" clearable @blur="queryList" />
				</template>

				<el-select v-else v-model="searchObj.match" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="是否一致" @change="queryList">
					<el-option label="一致" value="1" />
					<el-option label="未找到" value="0" />
				</el-select>
			</div>
			<div>
				<el-button class="zs-btn-primary" @click="syncFn"> 立即同步 </el-button>
			</div>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table v-if="routeQuery.type == 1" class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="deviceCode" label="设备唯一编号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="deviceMatchTxt" label="是否匹配" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="groupName" label="分组名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="switchRoom" label="配电室" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="dispatchNumber" label="调度号" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				<el-table-column prop="ratedCurrent" label="额定电流" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				<el-table-column prop="containerNumber" label="柜号" show-overflow-tooltip align="right" :formatter="defaultTableData" />
			</el-table>

			<el-table v-else class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="deviceCode" label="设备唯一编号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="deviceMatchTxt" label="设备是否匹配" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="contractCode" label="关联合同编码" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="brandName" label="三方品牌名" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="roomName" label="三方单元编号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="contractMatchTxt" label="合同是否匹配" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="wuTongBrandName" label="梧桐品牌名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="assetsNum" label="梧桐单元编号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { defaultTableData } from '@/utils/publicUtils';
	import Energy from '@/api/Energy';
	import { ref, reactive } from 'vue';
	import { ElMessage } from 'element-plus';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';

	const routeQuery = useRoute().query;
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let searchObj = reactive({ energyMeterConfigId: routeQuery.id, pageNumber: 1, pageSize: curPageSize.value });

	// //列表数据源
	const queryList = async () => {
		tableData.loading = true;
		if (routeQuery.type == 2) {
			searchObj.deviceMatch = searchObj.match;
			searchObj.contractMatch = searchObj.match;
		}
		let res = await Energy.facilityStandingListApi(searchObj);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list;
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNumber = size;
		}
		queryList();
	};

	const initData = list => {
		list.forEach(item => {
			item.deviceMatchTxt = item.deviceMatch == 1 ? '一致' : '未找到';
			item.contractMatchTxt = item.contractMatch == 1 ? '一致' : '未找到';
		});
	};

	//同步
	const syncFn = async () => {
		let res = await Energy.syncDoApi({ energyMeterConfigId: routeQuery.id });
		if (res.data.code !== 200) return;
		ElMessage({ message: '同步成功', type: 'success' });
		queryList();
	};

	queryList();
</script>
